import {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Card} from 'antd';
import {} from 'antd-mobile';
import Affix from '../../../component/Affix';
import styles from './css/Bookcase.css';
/* WaterWave */
import WaterWave from 'water-wave';
import 'water-wave/style.css';

class Bookcase extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let {search} = state;
		
		return (
			<div className={styles.container}>
				<div>
					{/* 顶部占位 */}
					<div className={styles.topPlaceholder} />
					{/* 顶部悬浮 */}
					<div className={styles.searchContainer}>
						<input 
							className={styles.search} 
							placeholder='输入搜索关键字' 
							value={search || ''} 
							onChange={e => {
								dispatch({
									type: 'bookcase/setSearch',
									search: e.target.value
								});
							}}
						/>
						{search ? 
							<span 
								className={styles.cancel}
								onClick={() => {
									dispatch({
										type: 'bookcase/setSearch',
										search: ''
									});
								}}
							>
								取消
							</span>
							: ''
						}
						<WaterWave color="#E6E6E6" duration={500} radius={20} />
					</div>
					{/*
					<div className={styles.filterContainer}>
						<div className={styles.filterItem}>时间筛选</div>
						<div className={styles.filterSplit}>|</div>
						<div className={styles.filterItem}>阅读筛选</div>
					</div>
					*/}
				</div>
				<div className={styles.body}>
					<div className={styles.item}>
						<img className={styles.img} src={require('../asset/img/book.jpg')} />
						<div>
							描述
						</div>
					</div>
					<div className={styles.item}>
						<img className={styles.img} src={require('../asset/img/book.jpg')} />
						<div>
							描述
						</div>
					</div>
					<div className={styles.item}>
						<img className={styles.img} src={require('../asset/img/book.jpg')} />
						<div>
							描述
						</div>
					</div>
				</div>
			</div>
		);
	}
	
	componentDidMount() {
		this.props.dispatch({
			type: 'bookcase/reset'
		});
	}
	
}

export default connect((state) => ({
	state: {
		...state.bookcase,
		loading: state.loading.models.bookcase
	}
}))(Bookcase);
